<template>
  <div class="hello">
    <el-dialog
      title="页面配置"
      width="85%"
      :close-on-click-modal="false"
      :visible.sync="interactiveVisible"
      append-to-body
      class="each_interactiveViewTow"
    >
      <span slot="title" class="edit-form-apikey">{{
        !dataObj.id ? "新增页面配置" : "修改页面配置"
      }}</span>
      <div class="f-submit" slot="title">
        <el-button type="primary" class="f-save" @click="fSubmit"
          >确定生成</el-button
        >
      </div>
      <div class="flex_box">
        <div class="flex_one">
          <div>
            <el-form
              :model="dataForm"
              :rules="dataRule"
              ref="dataForm"
              :inline="true"
              @keyup.enter.native="dataFormSubmit()"
              label-width="160px"
              class="eachOther-from"
              label-position="right"
            >
              <el-form-item label="页面名称:" prop="tempName">
                <el-input
                  style="width: 25.5rem"
                  v-model="dataForm.tempName"
                  placeholder="请输入页面名称"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="分公司:" prop="remark">
          <el-input style="width:25.5rem" v-model="dataForm.remark" placeholder="分公司"></el-input>
        </el-form-item> -->
              <el-form-item label="创建编号:" prop="">
                <el-input
                  disabled
                  style="width: 24.2rem; background: gray"
                  placeholder="编号"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="创建人:" prop="remark">
          <el-input style="width: 25.5rem" v-model="dataForm.remark" placeholder="创建人"></el-input>
        </el-form-item> -->
              <!-- <el-form-item label="页面状态" v-if="dataForm.id !== 0">
            <el-radio-group v-model="dataForm.state" >
              <el-radio label="1">正常</el-radio>
              <el-radio label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item> -->

              <el-form-item label="是否使用通用页面图片:">
                <el-radio-group
                  v-model="dataForm.radio"
                  style="width: 25.5rem"
                  @change="handleRadio()"
                >
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="选择图片" v-if="dataForm.radio === 0">
                <el-upload
                  :action="imgAction"
                  list-type="picture-card"
                  :file-list="fileList"
                  name="images"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                  :limit="1"
                  :on-exceed="handleExceed"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
              <div>
                <el-form-item label="备注:">
                  <el-input
                    type="textarea"
                    style="width: 60.5rem"
                    maxlength="200"
                    show-word-limit
                    v-model="dataForm.remark"
                  ></el-input>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div style="font-size: 16px">配置组件</div>
          <el-row>
            <el-col class="g-form-box elCol-one" :span="5">
              <div style="font-size: 16px; font-weight: bold">控件选择</div>
              <div class="f-type">
                <div class="f-item">
                  <!-- <div>
                <img
                  style="width: 20px; height: 20px"
                  src="../../../assets/imgEach/rognqi.png"
                  alt=""
                />
                输入型组件
              </div> -->
                  <div
                    @click="addFormItem(5)"
                    class="l-section"
                    style="cursor: pointer"
                    @mousedown="addDraggable"
                    @dragstart="addStartDrag(5)"
                    @dragend="pDragEnd($event)"
                    :draggable="isDraggable"
                  >
                    <!-- <img
                      style="width: 20px; height: 25px"
                      src="../../../assets/imgEach/danhang.png"
                      alt=""
                    /> -->
                    <img
                      style="width: 20px; height: 25px"
                      src="../../../assets/eachImg/input.png"
                      alt=""
                    />
                    输入框
                  </div>
                  <!-- <div>
                <img
                  style="width: 20px; height: 20px"
                  src="../../../assets/imgEach/rognqi.png"
                  alt=""
                />
                选择型组件
              </div> -->
                  <div
                    @click="addFormItem(0)"
                    class="l-section"
                    @mousedown="addDraggable"
                    @dragstart="addStartDrag(0)"
                    @dragend="pDragEnd($event)"
                    :draggable="isDraggable"
                  >
                    <!-- <img
                      style="width: 20px; height: 20px"
                      src="../../../assets/imgEach/onechoice.png"
                      alt=""
                    /> -->
                    <img
                      style="width: 20px; height: 20px"
                      src="../../../assets/eachImg/danchoice.png"
                      alt=""
                    />
                    单选框
                  </div>
                  <div
                    @click="addFormItem(1)"
                    class="l-section"
                    @mousedown="addDraggable"
                    @dragstart="addStartDrag(1)"
                    @dragend="pDragEnd($event)"
                    :draggable="isDraggable"
                  >
                    <!-- <img
                      style="width: 20px; height: 25px"
                      src="../../../assets/imgEach/duochoice.png"
                      alt=""
                    /> -->
                    <img
                      style="width: 20px; height: 25px"
                      src="../../../assets/eachImg/morechoice.png"
                      alt=""
                    />
                    多选框
                  </div>
                  <div
                    @click="addFormItem(2)"
                    class="l-section"
                    @mousedown="addDraggable"
                    @dragstart="addStartDrag(2)"
                    @dragend="pDragEnd($event)"
                    :draggable="isDraggable"
                  >
                    <!-- <img
                      style="width: 20px; height: 20px"
                      src="../../../assets/imgEach/xiala.png"
                      alt=""
                    /> -->
                    <img
                      style="width: 20px; height: 25px"
                      src="../../../assets/eachImg/xialaselect.png"
                      alt=""
                    />
                    下拉框
                  </div>
                  <div
                    @click="addFormItem(3)"
                    class="l-section"
                    @mousedown="addDraggable"
                    @dragstart="addStartDrag(3)"
                    @dragend="pDragEnd($event)"
                    :draggable="isDraggable"
                  >
                    <!-- <img
                      style="width: 20px; height: 25px"
                      src="../../../assets/imgEach/file.png"
                      alt=""
                    /> -->
                    <img
                      style="width: 20px; height: 25px"
                      src="../../../assets/eachImg/upload.png"
                      alt=""
                    />
                    文件上传
                  </div>
                  <div
                    @click="addFormItem(4)"
                    class="l-section"
                    style="cursor: pointer"
                    @mousedown="addDraggable"
                    @dragstart="addStartDrag(4)"
                    @dragend="pDragEnd($event)"
                    :draggable="isDraggable"
                  >
                    <!-- <img
                      style="width: 20px; height: 25px"
                      src="../../../assets/imgEach/date.png"
                      alt=""
                    /> -->
                    <img
                      style="width: 20px; height: 20px"
                      src="../../../assets/eachImg/time.png"
                      alt=""
                    />
                    时间选择
                  </div>
                </div>
              </div>
              <div style="text-align: center; margin-top: 25px">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="handlePreview"
                  >生成预览</el-button
                >
              </div>
            </el-col>
            <el-col class="g-form-box elCol-tow" :offset="1" :span="18">
              <!-- <div class="f-submit">
            <el-button type="primary"  @click="fSubmit">完成编辑</el-button>
          </div> -->
              <div
                class="drop-box"
                @dragover="pDragOver($event)"
                @dragstart="pDragStart($event)"
                @dragend="pDragEnd($event)"
                ref="parentNode"
              >
                <!-- label-width="80px" -->
                <el-form ref="form" :model="formObj" label-position="right">
                  <div
                    class="form-i input-div"
                    v-for="(item, index) in formList"
                    :key="item.key"
                    @mousedown="addDraggable"
                    :draggable="isDraggable"
                    ref="items"
                    :data-index="index"
                  >
                    <!-- 标题 -->

                    <div
                      v-if="item.type != 99"
                      class="input-name"
                      style="margin: 10px 0; display: inline-block"
                    >
                      <!-- <span style="color: red" v-if="item.required">*</span> -->
                      <!-- {{ index + 1 }} -->
                      {{ item.title ? item.title : "标题" }}
                      <!-- <span style="color: #aaa" v-if="item.type == 2">[多选框]</span> -->
                      <!-- <el-input class="form-t" type="text" v-model="item.title" :placeholder="item.tips"></el-input> -->
                    </div>
                    <div class="input_lenth">
                      <el-form-item label="">
                        <el-input
                          v-if="item.type == 6"
                          v-model="formObj.input"
                          placeholder="请输入内容"
                        ></el-input>
                      </el-form-item>
                      <!-- 单选按钮 -->
                      <el-form-item label="">
                        <el-radio-group
                          v-if="item.type == 1"
                          v-model="formObj.oneChange"
                          :disabled="index == editIndex"
                          class="dan_radio"
                        >
                          <el-radio
                            v-for="(ritem, rindex) in item.list"
                            :key="'r' + index + rindex"
                            :label="ritem.val"
                            :style="
                              item.direction == 2 ? 'display:inline-block;' : ''
                            "
                          >
                            {{ ritem.text }}
                          </el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <!-- 多选按钮 -->
                      <el-form-item label="">
                        <el-checkbox-group
                          v-if="item.type == 2"
                          v-model="formObj.moreChange"
                          class="duo_radio"
                        >
                          <el-checkbox
                            v-for="(citem, cindex) in item.list"
                            :key="'c' + index + cindex"
                            :label="citem.text"
                            :name="'c' + index"
                            :value="citem.val"
                            :style="
                              item.direction == 2 ? 'display:inline-block;' : ''
                            "
                          >
                          </el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                      <!-- 下拉框 -->
                      <!-- <el-select
                  v-if="item.type == 3"
                  v-model="item.value"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(sitem, cindex) in item.list"
                    :key="'s' + index + cindex"
                    :label="sitem.text"
                    :value="sitem.val"
                  >
                  </el-option>
                </el-select> -->
                      <!-- 下拉 -->
                      <el-form-item label="">
                        <select id="sid" v-if="item.type == 3" class="s-select">
                          <option
                            v-for="(sitem, cindex) in item.list"
                            :key="'s' + index + cindex"
                            :label="sitem.text"
                            :value="sitem.val"
                          ></option>
                        </select>
                      </el-form-item>
                      <!-- 文件 -->
                      <!-- style="margin-left: 30px;" -->
                      <el-form-item label="" class="fujian_time">
                        <div
                          class="chooseFile"
                          style="height: auto"
                          v-if="item.type == 4"
                        >
                          <input
                            type="button"
                            id="uploadbtn"
                            value="选择文件"
                          /><input
                            type="button"
                            id="uploadfile"
                            style="display: none"
                            value="上传文件"
                          />
                          <input
                            type="file"
                            id="uploadpicker"
                            class="uploadpicker"
                            accept=""
                            style="display: none"
                            multiple
                          />
                          <input
                            type="text"
                            id="uploadtext"
                            class="uploadtext"
                            name="input1"
                            accept=""
                            style="display: none"
                          />
                          <div>
                            <ul id="checkfileList"></ul>
                          </div>
                        </div>
                      </el-form-item>
                      <!-- <el-input
                      v-if="item.type == 5"
                      v-model="formObj.input"
                      placeholder="请输入内容"
                    ></el-input> -->
                      <!-- 时间 -->
                      <!-- style="margin-left: 30px;" -->
                      <el-form-item label="" class="fujian_time">
                        <input
                          v-if="item.type == 5"
                          type="date"
                          id="dateTime"
                          class="input_time"
                          value=""
                        />
                        <!-- <el-date-picker
                      v-if="item.type == 5"
                      v-model="formObj.time"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker> -->
                      </el-form-item>
                    </div>
                    <!-- 编辑弹窗 -->
                    <div
                      class="f-edit"
                      v-if="editIndex != -1 && editIndex == index"
                    >
                      <el-input
                        v-model="formList[editIndex].title"
                        placeholder="请输入标题"
                      ></el-input>
                      <!-- <el-checkbox v-model="formList[editIndex].required"
                    >必填</el-checkbox
                  > -->

                      <!-- <el-row style="background: rgb(232, 232, 232);text-align: center;padding: 10px 0;" -->
                      <el-row
                        style="
                          background: rgb(13, 45, 105);
                          border: 1px solid #5f5f90;
                          text-align: center;
                          padding: 10px 0;
                          margin-top: 10px;
                        "
                        v-if="tipVisibleShow"
                      >
                        <el-col :span="8"
                          >选项文字
                          <i
                            class="el-icon-sort"
                            style="color: #409eff"
                            @click="sortItemChild"
                          ></i
                        ></el-col>
                        <!-- <el-col :span="2">图片</el-col>
                  <el-col :span="2">说明</el-col> -->
                        <!-- <el-col :span="2">允许填空</el-col> -->
                        <!-- <el-col :span="2">默认</el-col> -->
                        <el-col :span="4">上移</el-col>
                        <el-col :span="4">下移</el-col>
                      </el-row>
                      <!-- <el-radio-group style="font-size:14px;display:block;" v-if="formList[editIndex].type == 1" v-model="formList[editIndex].value"> -->
                      <el-row
                        style="text-align: center; padding: 10px 0"
                        v-for="(it, index) in formList[editIndex].list"
                        :key="'edit' + index"
                        v-if="tipVisibleShow"
                      >
                        <el-col :span="8">
                          <el-input type="text" v-model="it.text"></el-input>
                        </el-col>
                        <!-- <el-col :span="2">
                    <i class="el-icon-picture-outline"></i>
                  </el-col>
                  <el-col :span="2">
                    <i class="el-icon-tickets"></i>
                  </el-col> -->
                        <el-col :span="2">
                          <!-- <el-radio :label="it.val"></el-radio> -->
                          <!-- <el-checkbox
                        @change="defaultChange(index, $event)"
                        :checked="formList[editIndex].value == it.val"
                        :disabled="
                          formList[editIndex].value == it.val
                            ? false
                            : formList[editIndex].value.toString() == ''
                            ? false
                            : true
                        "
                      >
                      </el-checkbox> -->
                        </el-col>
                        <el-col :span="4">
                          <i class="el-icon-top" @click="formMove(index, -1, 1)"
                            >↑</i
                          >
                        </el-col>
                        <el-col :span="4">
                          <i
                            class="el-icon-bottom"
                            @click="formMove(index, 1, 1)"
                            >↓</i
                          >
                        </el-col>
                      </el-row>
                      <el-row style="padding: 10px 0" v-if="tipVisibleShow">
                        <el-col :span="8">
                          <el-button type="primary" @click="addItemChild"
                            ><i class="el-icon-circle-plus-outline"></i>
                            添加选项</el-button
                          >
                        </el-col>
                        <!-- <el-col :offset="2" :span="4">
                    <el-select v-model="formList[editIndex].random">
                      <el-option :value="1" label="选项不随机"></el-option>
                      <el-option :value="2" label="选项随机"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :offset="2" :span="4">
                    <el-select v-model="formList[editIndex].direction">
                      <el-option :value="1" label="竖向排列"></el-option>
                      <el-option :value="2" label="横向排列"></el-option>
                    </el-select>
                  </el-col> -->
                      </el-row>
                      <!-- </el-radio-group> -->

                      <el-button
                        style="display: block; width: 100%; margin-top: 5px"
                        type="primary"
                        @click="completeEdit"
                        >完成编辑</el-button
                      >
                    </div>
                    <div style="height: 40px" class="form-b-content">
                      <div class="form-b">
                        <el-tooltip
                          class="item"
                          effect="light"
                          content="编辑"
                          placement="top"
                        >
                          <el-button type="text" @click="formEdit(index, item)">
                            <!-- <i class="el-icon-edit"></i> -->
                            <img
                              src="../../../assets/eachImg/edit.png"
                              alt=""
                              srcset=""
                            />
                          </el-button>
                        </el-tooltip>
                        <el-tooltip
                          class="item"
                          effect="light"
                          content="删除"
                          placement="top"
                        >
                          <el-button type="text" @click="formDel(index)">
                            <!-- <i class="el-icon-delete"></i
                          > -->
                            <img
                              src="../../../assets/eachImg/delectTow.png"
                              alt=""
                              srcset=""
                            />
                          </el-button>
                        </el-tooltip>
                        <el-tooltip
                          class="item"
                          effect="light"
                          content="上移"
                          placement="top"
                        >
                          <el-button type="text" @click="formMove(index, -1)">
                            <!-- <i class="el-icon-arrow-up"></i
                          > -->
                            <img
                              src="../../../assets/eachImg/up_one.png"
                              alt=""
                              srcset=""
                            />
                          </el-button>
                        </el-tooltip>
                        <el-tooltip
                          class="item"
                          effect="light"
                          content="下移"
                          placement="top"
                        >
                          <el-button type="text" @click="formMove(index, 1)">
                            <!-- <i class="el-icon-arrow-down"></i
                          > -->
                            <img
                              src="../../../assets/eachImg/down_one.png"
                              alt=""
                              srcset=""
                            />
                          </el-button>
                        </el-tooltip>
                        <el-tooltip
                          class="item"
                          effect="light"
                          content="最前"
                          placement="top"
                        >
                          <el-button type="text" @click="formMove(index, 0)">
                            <!-- <i class="el-icon-upload2"></i
                          > -->
                            <img
                              src="../../../assets/eachImg/up_tow.png"
                              alt=""
                              srcset=""
                            />
                          </el-button>
                        </el-tooltip>
                        <el-tooltip
                          class="item"
                          effect="light"
                          content="最后"
                          placement="top"
                        >
                          <el-button type="text" @click="formMove(index, -2)">
                            <!-- <i class="el-icon-download"></i
                          > -->
                            <img
                              src="../../../assets/eachImg/down_tow.png"
                              alt=""
                              srcset=""
                            />
                          </el-button>
                        </el-tooltip>
                        <!-- <el-button
                      @click="formEdit(index, item)"
                      icon="el-icon-edit-outline"
                      plain
                      type="text"
                      >编辑</el-button
                    >
                    <el-button
                      @click="formDel(index)"
                      icon="el-icon-delete"
                      plain
                      type="text"
                      >删除</el-button
                    >
                    <el-button
                      @click="formMove(index, -1)"
                      icon="el-icon-top"
                      plain
                      type="text"
                      >上移</el-button
                    >
                    <el-button
                      @click="formMove(index, 1)"
                      icon="el-icon-bottom"
                      plain
                      type="text"
                      >下移</el-button
                    >
                    <el-button
                      @click="formMove(index, 0)"
                      icon="el-icon-upload2"
                      plain
                      type="text"
                      >最前</el-button
                    >
                    <el-button
                      @click="formMove(index, -2)"
                      icon="el-icon-download"
                      plain
                      type="text"
                      >最后</el-button
                    > -->
                      </div>
                    </div>
                  </div>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="flex_tow">
          <div class="flex_t_title">页面预览</div>
          <div class="iframe_box">
            <!-- <img src="../../../assets/courseImg/yulan.png" alt="" srcset="" /> -->
            <!-- <iframe id="mainIframe" name="mainIframe" src="http://134.64.251.212:8084/cpcp/htmlUrl/测试0530-3.html?imgUrls=http://134.64.251.212:8084/cpcp/htmlUrl/du_bg.png" frameborder="0" scrolling="yes"></iframe> -->
            <!-- <iframe
              id="mainIframe"
              name="mainIframe"
              src="http://127.0.0.1:5501/src/views/%E6%B5%8B%E8%AF%950413-10.html"
              frameborder="0"
              scrolling="yes"
            ></iframe> -->
            <iframe
              id="mainIframe"
              name="mainIframe"
              :src="iframeUrl"
              frameborder="0"
              scrolling="yes"
            ></iframe>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" class="each_imgDialog">
      <img width="100%" :src="dialogImageUrl" alt="" />
      <!-- <img width="100%" src="../../../assets/imtTow/3.png" alt="" /> -->
    </el-dialog>
  </div>
</template>
     
<script>
// 1单选 2多选 3下拉框 4文件上传
const formItems = [
  {
    type: 1,
    title: "",
    tips: "请输入标题",
    required: true,
    value: 0,
    random: 1,
    direction: 1,
    list: [
      {
        text: "选项11",
        val: 0,
      },
      {
        text: "选项22",
        val: 1,
      },
    ],
  },
  {
    type: 2,
    title: "",
    tips: "请输入标题",
    required: true,
    value: [],
    random: 1,
    direction: 1,
    // list:['选项1','选项2']
    list: [
      {
        text: "选项11",
        val: 0,
      },
      {
        text: "选项22",
        val: 1,
      },
    ],
  },
  {
    type: 3,
    title: "",
    tips: "请输入标题",
    required: true,
    value: "",
    // list:['选项1','选项2']
    list: [
      {
        text: "选项33",
        val: 0,
      },
      {
        text: "选项44",
        val: 1,
      },
    ],
  },
  {
    type: 4,
    title: "文件上传",
    tips: "请选择文件",
    required: true,
    value: "",
  },
  {
    type: 5,
    title: "时间选择",
    tips: "请选择时间",
    required: true,
    value: "",
  },
  {
    type: 6,
    title: "",
    tips: "请输入标题",
    required: true,
    value: "",
    noChoice: "",
  },
];
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  components: {},
  data() {
    return {
      timeFlag: "", //给iframe的时间戳参数
      iframeUrl: "", //iframe地址
      dialogImageUrl: "",
      dialogVisible: false,
      dataForm: {
        id: 0,
        roleName: "",
        remark: "",
        state: "1",
        tempName: "", //页面名称
        desc: "",
        radio: 1,
        imgUrls: "",
      },
      fileList: [],
      dataRule: {
        tempName: [
          { required: true, message: "页面名称不能为空", trigger: "blur" },
        ],
      },
      fileListFile: [], //推送文件上传
      fileAction: "", //推送文件上传
      submitShow: false,
      interactiveVisible: false,
      formObj: {
        input: "",
        oneChange: "", //单选框
        moreChange: [], //多选框
        time: "",
        text: "",
        id:0
      },
      tipVisibleShow: false,
      formList: [],
      shadow: false,
      isDraggable: false,
      moveIndex: -1, //添加新元素的表单类型
      draging: null, //被拖拽的对象
      target: null, //目标对象
      newdom: null, //新添加的对象

      editIndex: -1, //要编辑的对象的下标
      dataObj: {}, //点击下一步 传过来的数据
      dataType:null
    };
  },
  mounted() {
    //为了防止火狐浏览器拖拽的时候以新标签打开
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  watch: {
    interactiveVisible(newVal, oldVal) {
      if (newVal === false) {
        console.log("interactiveVisible");
        this.iframeUrl = "";
        this.dataForm.radio = 1;
        this.dataObj.imgUrls = "";
        this.fileList = [];
        this.editIndex = -1; //完成编辑没有点击时，关闭配置弹框，下次再点击进来，完成编辑消失，否则，进来后，上次没关闭的完成编辑处在打开状态
        this.formList = [];
        this.dataObj.id = 0
        formItems = [
          {
            type: 1,
            title: "",
            tips: "请输入标题",
            required: true,
            value: 0,
            random: 1,
            direction: 1,
            list: [
              {
                text: "选项11",
                val: 0,
              },
              {
                text: "选项22",
                val: 1,
              },
            ],
          },
          {
            type: 2,
            title: "",
            tips: "请输入标题",
            required: true,
            value: [],
            random: 1,
            direction: 1,
            // list:['选项1','选项2']
            list: [
              {
                text: "选项11",
                val: 0,
              },
              {
                text: "选项22",
                val: 1,
              },
            ],
          },
          {
            type: 3,
            title: "",
            tips: "请输入标题",
            required: true,
            value: "",
            // list:['选项1','选项2']
            list: [
              {
                text: "选项33",
                val: 0,
              },
              {
                text: "选项44",
                val: 1,
              },
            ],
          },
          {
            type: 4,
            title: "文件上传",
            tips: "请选择文件",
            required: true,
            value: "",
          },
          {
            type: 5,
            title: "时间选择",
            tips: "请选择时间",
            required: true,
            value: "",
          },
          {
            type: 6,
            title: "",
            tips: "请输入标题",
            required: true,
            value: "",
            noChoice: "",
          },
        ];
      }
    },
  },
  created() {
    this.fileAction = this.$http.adornUrl(
      `cpcpdu/uploadImg?token=${this.$cookie.get("token")}`
    );
    // alert(this.fileAction);
    this.imgAction = this.$http.adornUrl(
      `cpcpdu/uploadImg?token=${this.$cookie.get("token")}`
    );
  },
  methods: {
    init(data) {
      console.log("data===", data);
      console.log("data===", typeof data);
      this.dataType = data
      
      console.log("this.dataType===", this.dataType);
      console.log("this.dataType===", typeof this.dataType);
      this.interactiveVisible = true;
      this.dataObj.id = data || 0;
      console.log("this.dataForm.id===", this.dataForm);
      console.log("this.dataForm.id===",this.dataObj);
      if (data === undefined) {
        console.log("增加");
        this.formList = [];
        this.dataForm.tempName = "";
        this.dataForm.remark = "";
        this.dataForm.state = "1";
      } else {
        console.log("编辑");
        let obj = JSON.parse(JSON.stringify(data)); //深拷贝,拷贝的是对象
        console.log("obj===", obj);
        this.dataForm.id = obj.id;
        this.dataForm.tempName = obj.tempName;
        this.dataForm.remark = obj.remark;
        this.dataForm.radio = obj.flag;
        if (this.dataForm.radio === 0) {
          this.dataForm.imgUrls = obj.imgUrls;
          let objT = {};
          objT.url = this.dataForm.imgUrls;
          this.fileList.push(objT);
          console.log("this.fileList===", this.fileList);
        }
        // this.iframeUrl = `http://134.64.251.212:8084/cpcp/htmlUrl/测试0413-10.html?imgUrls=http://134.64.251.212:8084/cpcp/htmlUrl/du_bg.png`
        this.iframeUrl = obj.tempUrl + "?imgUrls=" + obj.imgUrls;
        console.log("============", this.iframeUrl);
        this.dataForm.state = obj.state.toString();
        let qwe = obj.tempElementDesc;
        console.log("----", JSON.parse(qwe));
        let aaa = JSON.parse(qwe);
        // let asdf = 0
        aaa.forEach((element) => {
          console.log("111", element);
          console.log("1114645675", element.newType);
          // if (element.type === 0) {
          //   console.log("------------------");
          //   asdf = 0
          //   console.log("asdf",asdf);
          //   this.addFormItem(asdf)
          // }else{
          //   console.log("================");
          //   asdf = element.type
          //   console.log("asdf",asdf);
          //   this.addFormItem(asdf)
          // }
          // console.log("asdf",asdf);
          // this.addFormItemTow(element.type)
          this.addFormItemTow(element.newType - 1, element.title, element.list);
        });
      }
      console.log("dataForm====", this.dataForm);
      //   this.dataObj = data;
      console.log("this.dataObj=", this.dataObj);
    },
    handleExceed(file) {
      this.$message.warning("最多上传1张图片");
    },
    handleSuccess(file) {
      console.log("wwwwwwwwwwwwwwww", file);
      console.log("wwwwwwwwwwwwwwww", file.data);
      this.dataForm.imgUrls = file.data;
      let obj = {};
      obj.url = file.data;
      this.fileList.push(obj);
      console.log("this.fileList===", this.fileList);
    },
    handleRemove(file, fileList) {
      console.log("file===", file);
      console.log("file===", fileList);
      let ss = file.url;
      let index = ss.lastIndexOf("/");
      let result = ss.substr(index + 1, ss.length);
      this.fileList = fileList.slice(-3);
      console.log("resultresultresult===", result);
      console.log("file===77777777777777777777", fileList);
    },
    handlePictureCardPreview(file) {
      console.log("file===", file);
      // this.isUploadImgShow = true;
      this.dataForm.imgUrls = file.url;
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log("this.dataForm.imgUrls==", this.dataForm.imgUrls);
    },
    // 拿起已有元素时
    pDragStart(event) {
      this.draging = event.target;
    },
    // 在可放置组件拖动时
    pDragOver(event) {
      console.log("drag move");
      this.target = event.target;
      let targetTop = event.target.getBoundingClientRect().top;

      // 拖动添加新元素时
      if (!this.draging) {
        let newDom = document.createElement("DIV");
        newDom.className = "form-i";
        newDom.style.height = "150px";
        newDom.style.background = "#aaaaaa";
        if (this.$refs.parentNode.childNodes.length == 0) {
          this.$refs.parentNode.appendChild(newDom);
        } else {
          this.target.parentNode.insertBefore(newDom, this.target);
        }

        this.draging = newDom;
        this.newdom = newDom;
      }

      let dragingTop = this.draging.getBoundingClientRect().top;
      if (this.target.className === "form-i" && this.target !== this.draging) {
        if (this.target) {
          if (this.target.animated) {
            return;
          }
        }

        if (this._index(this.draging) < this._index(this.target)) {
          this.target.parentNode.insertBefore(
            this.draging,
            this.target.nextSibling
          );
        } else {
          this.target.parentNode.insertBefore(this.draging, this.target);
        }
        this._anim(targetTop, this.target);
        this._anim(dragingTop, this.draging);
      }
    },
    // 动画
    _anim(startPos, dom) {
      let offset = startPos - dom.getBoundingClientRect().top;
      dom.style.transition = "none";
      dom.style.transform = `translateY(${offset}px)`;

      //触发重绘
      dom.offsetWidth;
      dom.style.transition = "transform .3s";
      dom.style.transform = ``;
      //触发重绘
      // setTimeout(()=>{
      //     dom.style.transition="transform .3s";
      //     dom.style.transform=``;
      // },0)
      clearTimeout(dom.animated);

      dom.animated = setTimeout(() => {
        dom.style.transition = "";
        dom.style.transform = ``;
        dom.animated = false;
      }, 300);
    },
    // 放下时
    pDragEnd() {
      console.log("drag end");
      this.isDraggable = false;
      let currentNodes = Array.from(this.$refs.parentNode.childNodes);
      console.log("=currentNodes=", currentNodes);
      console.log(this.target);
      let data = [];
      currentNodes.forEach((i) => {
        console.log("----", i.dataset.index);
        if (i.dataset.index == undefined) {
          console.log("11111111111", formItems[this.moveIndex]);
          let formItem = JSON.stringify(formItems[this.moveIndex]);
          console.log("11111111111", formItems[this.moveIndex]);
          formItem = JSON.parse(formItem);
          console.log("11111111111", formItems[this.moveIndex]);
          formItem.key = new Date().getTime();
          console.log("11111111111", formItems[this.moveIndex]);
          data.push(formItem);
          console.log("11111111111", formItems[this.moveIndex]);
          this.$refs.parentNode.removeChild(this.newdom);
        } else {
          console.log("22222222222222", formItems[this.moveIndex]);
          data.push(this.formList[i.dataset.index]);
        }
      });

      console.log(this.formList);
      this.formList = data;
    },
    // 获取索引
    _index(el) {
      let domData = Array.from(this.$refs.parentNode.childNodes);
      return domData.findIndex((i) => i.innerText == el.innerText);
    },

    // 添加组件拿起时
    addStartDrag(index) {
      this.moveIndex = index;
      console.log(index);
    },
    // 鼠标按下时 添加拖拽属性
    addDraggable() {
      // event.target.draggable = true

      // event.preventDefault();
      this.isDraggable = true;
      // this.$refs.item1.attributes('addDraggable',true)
    },
    // 添加表单项目-编辑时候调用
    addFormItemTow(type, title, list) {
      console.log("type====", type);
      console.log("title====", title);
      console.log("list====", list);
      console.log("type=", formItems[type]);
      if (formItems[type].type === type + 1) {
        formItems[type].title = title;
        formItems[type].list = list;
      }
      // 复制表单对象
      let formItem = JSON.stringify(formItems[type]);
      console.log("formItem===", formItem);
      // let formItem = JSON.stringify(type);
      formItem = JSON.parse(formItem);
      formItem.key = new Date().getTime();
      this.formList.push(formItem);
    },
    // 添加表单项目
    addFormItem(type) {
      console.log("type==", type);
      console.log("type=", formItems[type]);
      // 复制表单对象
      let formItem = JSON.stringify(formItems[type]);
      formItem = JSON.parse(formItem);
      formItem.key = new Date().getTime();
      this.formList.push(formItem);
    },
    // 表单子项目排序
    sortItemChild() {
      this.formList[this.editIndex].list.reverse();
    },
    // 添加表单项目子项
    addItemChild() {
      let formItemChild = JSON.stringify(
        formItems[this.formList[this.editIndex].type]
      );
      formItemChild = JSON.parse(formItemChild);
      formItemChild.val = this.formList[this.editIndex].list.length;
      this.formList[this.editIndex].list.push(formItemChild);
    },
    // 修改默认值
    defaultChange(index, event) {
      console.log(index, event);
      if (event) {
        this.formList[this.editIndex].value = index;
      } else {
        this.formList[this.editIndex].value = "";
      }
    },
    // 移动表单组件
    formMove(index, m, type) {
      let list = [];

      if (type) {
        // 移动表单子项

        // this.formList[this.editIndex].value = ''
        list = this.formList[this.editIndex].list;
      } else {
        // 移动表单项

        list = this.formList;
      }

      let obj = list.splice(index, 1)[0];

      // 最前
      if (m == 0) {
        list.unshift(obj);
      }

      // 上移或下移
      if (m == 1 || m == -1) {
        list.splice(index + m, 0, obj);
      }

      // 最后
      if (m == -2) {
        list.push(obj);
      }
      console.log(list);
    },
    // 完成组件编辑
    completeEdit() {
      this.editIndex = -1;
    },
    // 编辑组件
    formEdit(index, item) {
      console.log(index);
      console.log(index, item.type, "title=", item.title);
      if (item.type === 4 || item.type === 5 || item.type === 6) {
        this.tipVisibleShow = false;
      } else {
        console.log(index, item.type, "title=", item.title);
        this.tipVisibleShow = true;
      }
      this.editIndex = index;
    },
    // 删除表单组件
    formDel(index) {
      this.formList.splice(index, 1);
    },
    _strMapToObj(strMap) {
      let obj = Object.create(null);
      for (let [k, v] of strMap) {
        obj[k] = v;
      }
      return obj;
    },
    /**
     *map转换为json
     */
    _mapToJson(map) {
      return JSON.stringify(this._strMapToObj(map));
    },
    //切换按钮
    handleRadio() {
      console.log("=====", this.dataForm.radio);
    },
    //生成预览
    handlePreview() {
      this.timeFlag = new Date().getTime();
      console.log("this.dataForm===", this.dataForm.radio);
      if (this.dataForm.radio === 0) {
        console.log("1111111");
      } else {
        console.log("222222");
        this.dataForm.imgUrls = `http://134.64.251.212:8084/cpcp/htmlUrl/du_bg.png`;
      }
      console.log("this.dataForm===", this.dataForm);
      this.dataObj = this.dataForm;
      let map = new Map();
      let inputDivs = document.getElementsByClassName("input-div");
      // console.log("inputDivs==", inputDivs);
      // console.log("inputDivs==", inputDivs.length);
      // let inputName = ''
      for (let x = 0; x < inputDivs.length; x++) {
        let inputName = "input" + x;
        let title =
          inputDivs[x].getElementsByClassName("input-name")[0].innerText;
        // console.info(inputName, title);
        if (inputDivs[x].getElementsByTagName("input")[0]) {
          console.log("2135434645765785687788979808089");
          inputDivs[x]
            .getElementsByTagName("input")[0]
            .setAttribute("name", inputName);
        } else {
          inputDivs[x]
            .getElementsByTagName("select")[0]
            .setAttribute("name", inputName);
        }
        // console.log(
        //   "=================",
        //   inputDivs[x].getElementsByTagName("input")
        // );
        if (inputDivs[x].getElementsByTagName("input").length !== 0) {
          let inputType = inputDivs[x].getElementsByTagName("input")[0].type;
          console.log("inputType==", inputType);
          if (inputType == "radio") {
            let inputs = inputDivs[x].getElementsByTagName("input");
            for (let y = 0; y < inputs.length; y++) {
              inputs[y].setAttribute("name", inputName);
            }
          }

          if (inputType == "checkbox") {
            let inputs = inputDivs[x].getElementsByTagName("input");
            for (let y = 0; y < inputs.length; y++) {
              inputs[y].setAttribute("name", inputName);
            }
          }
          if (inputType == "button") {
            console.log("qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq");
            let inputs = inputDivs[x].getElementsByClassName("uploadtext");
            console.log("======================", inputs);
            for (let z = 0; z < inputs.length; z++) {
              // console.log("===11111111111111111",inputs[z.length-1]);
              inputs[z].setAttribute("name", inputName);
            }
          }
          if (inputType == "date") {
            console.log("dsdddddddddddddd");
            // console.log("======",document.getElementById("dateTime"));
            console.log("======", inputDivs[x].getElementsByTagName("input"));
            let inputs = inputDivs[x].getElementsByTagName("input");
            for (let q = 0; q < inputs.length; q++) {
              console.log("sdddddddddddddddd", inputs[q]);
              inputs[q].setAttribute("name", inputName);
              inputs[q].setAttribute("class", inputName + " input_time");
              // document.getElementById("dateTime").classList.add(inputName);
              inputs[q].setAttribute("onclick", `singleDate(${inputName})`);
            }
          }
        } else {
          let sid = document.getElementById("sid").childNodes;
          console.log("sid===", sid);
          for (let z = 0; z < sid.length; z++) {
            sid[z].setAttribute("name", inputName);
          }
        }
        map.set(inputName, title);
        console.info(map);
      }
      console.info(map);
      console.info(this._mapToJson(map));
      let tempElement = this._mapToJson(map);
      // let xxx = document.getElementsByClassName("form-b");
      // for (let index = 0; index < xxx.length; index++) {
      //   const element = xxx[index];
      //   element.style.display = "none";
      // }
      let html = this.$refs.parentNode.outerHTML;

      console.log(html);
      let one = html
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "'");
      // let newHtml = one
      let tempDoc = one;
      console.log("============", one);
      console.log("============", formItems);
      console.log("============", this.formList);
      let dataList = [];
      this.formList.forEach((item, index) => {
        let objNew = {};
        // console.log("item==", item);
        // console.log("-------map====", map);
        let barDataTow = [];
        //将map数据改为数组对象
        map.forEach((aa, nn) => {
          let objNew = {};
          // console.log("aa==",aa);
          // console.log("nn==",nn);
          objNew.key = nn;
          objNew.value = aa;
          barDataTow.push(objNew);
        });
        console.log("barDataTow===", barDataTow);
        //判断map里面的数据和this.formList title和value是否相同 如果相同，将map里面的input填给新对象objNew
        barDataTow.forEach((aaa, index) => {
          console.log("--------------", item);
          if (item.title === aaa.value) {
            objNew.input = aaa.key;
            objNew.newType = item.type;
          }
        });
        objNew.title = item.title;
        objNew.value = item.value;
        //判断是输入框还是其他控件 输入框的type = 6 ，多选框的type = 2，文件上传的type = 4，时间框的type = 5，给新对象objNew添加type属性
        //这些值都是直接获取到值，
        if (
          item.type === 6 ||
          item.type === 2 ||
          item.type === 4 ||
          item.type === 5
        ) {
          objNew.type = 0;
        } else {
          // 下拉框 type = 3，单选框 type = 1
          objNew.type = 1;
        }
        let acs = [];
        //循环this.formList里面的list数据，表示多选/单选/下拉数据 循环text val 添加给新对象objNew
        if (item.list) {
          item.list.forEach((aaa) => {
            let ooo = {};
            ooo.text = aaa.text;
            ooo.val = aaa.val;
            acs.push(ooo);
          });
          objNew.list = acs;
        } else {
          objNew.list = [];
        }
        dataList.push(objNew);
      });
      console.log("====================", dataList);
      // let tempElementDesc = JSON.stringify(this.formList)
      let tempElementDesc = JSON.stringify(dataList);
      this.getTtmlImgUrls(tempElement, tempDoc, tempElementDesc);
    },
    //获取页面地址，利用iframe展示
    getTtmlImgUrls(tempElement, tempDoc, tempElementDesc) {
      this.$http({
        url: this.$http.adornUrl("htmlTemp/htmlImgUrls"),
        method: "post",
        data: this.$http.adornData({
          tempElement: tempElement,
          tempDoc: tempDoc,
          tempElementDesc: tempElementDesc,
          tempName: this.dataObj.tempName,
          remark: this.dataObj.remark,
          imgUrls: this.dataObj.imgUrls,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("DATA", data);
          this.$message.success("操作成功");
          let iframeUrlSting = data.data;
          //拿到iframe地址，尾部加个时间戳，用于监听地址变化，更新iframe视图
          // let iframeUrl = `http://134.64.251.212:8084/cpcp/htmlUrl/测试0413-10.html?logId=4026498&tempId=56&imgUrls=http://134.64.251.212:8084/cpcp/htmlUrl/du_bg.png`;
          this.iframeUrl = iframeUrlSting + "&timeFlag=" + this.timeFlag;
          console.log("");
          // this.iframeUrl = `http://134.64.251.212:8084/cpcp/htmlUrl/测试0413-10.html?logId=4026498&tempId=56&imgUrls=http://134.64.251.212:8084/cpcp/htmlUrl/du_bg.png`
        } else {
          this.iframeUrl = "";
          this.$message.error(data.msg);
        }
      });
    },
    // 提交
    fSubmit() {
      console.log("this.dataForm===", this.dataForm.radio);
      if (this.dataForm.radio === 0) {
        console.log("1111111");
      } else {
        console.log("222222");
        this.dataForm.imgUrls = `http://134.64.251.212:8084/cpcp/htmlUrl/du_bg.png`;
      }
      console.log("this.dataForm===", this.dataForm);
      this.dataObj = this.dataForm;
      // console.log(this.formList);
      // console.log("----formObj", this.formObj);
      // console.log(this.$refs.parentNode);
      let map = new Map();
      let inputDivs = document.getElementsByClassName("input-div");
      // console.log("inputDivs==", inputDivs);
      // console.log("inputDivs==", inputDivs.length);
      // let inputName = ''
      for (let x = 0; x < inputDivs.length; x++) {
        let inputName = "input" + x;
        let title =
          inputDivs[x].getElementsByClassName("input-name")[0].innerText;
        // console.info(inputName, title);
        if (inputDivs[x].getElementsByTagName("input")[0]) {
          console.log("2135434645765785687788979808089");
          inputDivs[x]
            .getElementsByTagName("input")[0]
            .setAttribute("name", inputName);
        } else {
          inputDivs[x]
            .getElementsByTagName("select")[0]
            .setAttribute("name", inputName);
        }
        // console.log(
        //   "=================",
        //   inputDivs[x].getElementsByTagName("input")
        // );
        if (inputDivs[x].getElementsByTagName("input").length !== 0) {
          let inputType = inputDivs[x].getElementsByTagName("input")[0].type;
          console.log("inputType==", inputType);
          if (inputType == "radio") {
            let inputs = inputDivs[x].getElementsByTagName("input");
            for (let y = 0; y < inputs.length; y++) {
              inputs[y].setAttribute("name", inputName);
            }
          }

          if (inputType == "checkbox") {
            let inputs = inputDivs[x].getElementsByTagName("input");
            for (let y = 0; y < inputs.length; y++) {
              inputs[y].setAttribute("name", inputName);
            }
          }
          if (inputType == "button") {
            console.log("qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq");
            let inputs = inputDivs[x].getElementsByClassName("uploadtext");
            console.log("======================", inputs);
            for (let z = 0; z < inputs.length; z++) {
              // console.log("===11111111111111111",inputs[z.length-1]);
              inputs[z].setAttribute("name", inputName);
            }
          }
          if (inputType == "date") {
            console.log("dsdddddddddddddd");
            // console.log("======",document.getElementById("dateTime"));
            console.log("======", inputDivs[x].getElementsByTagName("input"));
            let inputs = inputDivs[x].getElementsByTagName("input");
            for (let q = 0; q < inputs.length; q++) {
              console.log("sdddddddddddddddd", inputs[q]);
              inputs[q].setAttribute("name", inputName);
              inputs[q].setAttribute("class", inputName + " input_time");
              // document.getElementById("dateTime").classList.add(inputName);
              inputs[q].setAttribute("onclick", `singleDate(${inputName})`);
            }
          }
        } else {
          let sid = document.getElementById("sid").childNodes;
          console.log("sid===", sid);
          for (let z = 0; z < sid.length; z++) {
            sid[z].setAttribute("name", inputName);
          }
        }

        // if(inputDivs[x].getElementsByTagName("input")[0].type === 'text'){
        //   inputName = "input" + x;
        // }else if(inputDivs[x].getElementsByTagName("input")[0].type === 'radio'){
        //   console.log("=el-radio=",document.getElementsByClassName("el-radio"));
        //   let elRadio = document.getElementsByClassName("el-radio")
        //   for (let index = 0; index < elRadio.length; elRadio++) {
        //       const element = elRadio[index];
        //       console.log("element==",element);
        //     }
        //   inputName = "radio" + x;
        // }else if(inputDivs[x].getElementsByTagName("input")[0].type === 'file'){
        //   inputName = "file" + x;
        // }

        // console.info(
        //   "inputDivs[x]",
        //   inputDivs[x].getElementsByTagName("input")[0]
        // );
        // console.info(
        //   "inputDivs[x]",
        //   inputDivs[x].getElementsByTagName("input")[0].type
        // );
        // console.info("inputDivs[x]",inputDivs[x].getElementsByTagName("input")[0].setAttribute("name", inputName));
        map.set(inputName, title);
        console.info(map);
        // arr.push(a);
        // input-name
      }
      console.info(map);
      console.info(this._mapToJson(map));
      let tempElement = this._mapToJson(map);
      let xxx = document.getElementsByClassName("form-b");
      for (let index = 0; index < xxx.length; index++) {
        const element = xxx[index];
        element.style.display = "none"
      }
      let html = this.$refs.parentNode.outerHTML;

      console.log(html);
      let one = html
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "'");
      // let newHtml = one
      // console.log("============");
      console.log("============", formItems);
      console.log("============", this.formList);
      let dataList = [];
      this.formList.forEach((item, index) => {
        let objNew = {};
        // console.log("item==", item);
        // console.log("-------map====", map);
        let barDataTow = [];
        //将map数据改为数组对象
        map.forEach((aa, nn) => {
          let objNew = {};
          // console.log("aa==",aa);
          // console.log("nn==",nn);
          objNew.key = nn;
          objNew.value = aa;
          barDataTow.push(objNew);
        });
        console.log("barDataTow===", barDataTow);
        //判断map里面的数据和this.formList title和value是否相同 如果相同，将map里面的input填给新对象objNew
        barDataTow.forEach((aaa, index) => {
          console.log("--------------", item);
          if (item.title === aaa.value) {
            objNew.input = aaa.key;
            objNew.newType = item.type;
          }
        });
        objNew.title = item.title;
        objNew.value = item.value;
        //判断是输入框还是其他控件 输入框的type = 6 ，多选框的type = 2，文件上传的type = 4，时间框的type = 5，给新对象objNew添加type属性
        //这些值都是直接获取到值，
        if (
          item.type === 6 ||
          item.type === 2 ||
          item.type === 4 ||
          item.type === 5
        ) {
          objNew.type = 0;
        } else {
          // 下拉框 type = 3，单选框 type = 1
          objNew.type = 1;
        }
        let acs = [];
        //循环this.formList里面的list数据，表示多选/单选/下拉数据 循环text val 添加给新对象objNew
        if (item.list) {
          item.list.forEach((aaa) => {
            let ooo = {};
            ooo.text = aaa.text;
            ooo.val = aaa.val;
            acs.push(ooo);
          });
          objNew.list = acs;
        } else {
          objNew.list = [];
        }
        dataList.push(objNew);
      });
      console.log("====================", dataList);
      // let tempElementDesc = JSON.stringify(this.formList)
      let tempElementDesc = JSON.stringify(dataList);
      // console.log(one);
      let tempDoc = one;
      // return;
      this.getToHtml(tempElement, tempDoc, tempElementDesc);
      // let xxx = document.getElementsByClassName('form-b')
      // console.log("xxx=",xxx);
      // console.log("xxx=",typeof xxx);
      // xxx[0].style.visibility = 'hidden';
      // console.log("xxx=",xxx);
      // console.log(this.$refs.qqqqqq.outerHTML);
      // this.$refs.qqqqqq.innerHTML = this.$refs.parentNode.outerHTML
    },
    getToHtml(tempElement, tempDoc, tempElementDesc) {
      // let xxx = document.getElementsByClassName("form-b");
      // for (let index = 0; index < xxx.length; index++) {
      //   const element = xxx[index];
      //   element.style.display = "none";
      // }
      // console.log("this.dataObj.id==",this.dataObj);
      // console.log("this.dataObj.id==",this.dataForm.id);
      // console.log("this.dataObj.id==",typeof this.dataForm.id.id);
      // if (this.dataForm.id === 0){
      //   console.log("新增");
      // }else{
      //   console.log("编辑");
      // }
      // return
      // console.log("str===",str);
      // console.log("this.this.dataObj==", this.dataObj);
      // console.log("tempElement==", tempElement);
      // console.log("tempDoc==", tempDoc);
      // console.log("tempElementDesc==", tempElementDesc);
      console.log("this.dataObj===", this.dataObj);
      console.log("===================",this.dataType);
      if (this.dataType === undefined){
        console.log("新增");
      }else{
        console.log("编辑");
      }
      // return
      // if (this.dataObj.id === 0) {
      if (this.dataType === undefined) {
        console.log("新增");
        this.$http({
          url: this.$http.adornUrl("htmlTemp/save"),
          // url: this.$http.adornUrl(`/htmlTemp/${this.dataObj.id === 0 ? 'save' : 'update'}`),
          method: "post",
          data: this.$http.adornData({
            tempElement: tempElement,
            tempDoc: tempDoc,
            tempElementDesc: tempElementDesc,
            tempName: this.dataObj.tempName,
            remark: this.dataObj.remark,
            imgUrls: this.dataObj.imgUrls,
            flag: this.dataObj.radio,
          }),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success("操作成功");
            this.$emit("refEachOther");
            this.interactiveVisible = false;
            this.formList = [];
          } else {
            this.$message.error(data.msg);
          }
        });
      } else {
        console.log("编辑");
        // return
        this.$http({
          url: this.$http.adornUrl("htmlTemp/update"),
          // url: this.$http.adornUrl(`/htmlTemp/${this.dataObj.id === 0 ? 'save' : 'update'}`),
          method: "post",
          data: this.$http.adornData({
            id: this.dataObj.id,
            tempElement: tempElement,
            tempDoc: tempDoc,
            state: this.dataObj.state,
            tempName: this.dataObj.tempName,
            remark: this.dataObj.remark,
            tempElementDesc: tempElementDesc,
            imgUrls: this.dataObj.imgUrls,
            flag: this.dataObj.radio,
          }),
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success("操作成功");
            this.$emit("refEachOther");
            this.interactiveVisible = false;
            this.formList = [];
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    },
  },
};
</script>
<style scoped lang="scss">
.edit-form-apikey {
  font-size: 18px;
  color: #fff;
}
.edit-form-apikey::after {
  content: "";
  width: 5px;
  height: 30px;
  position: absolute;
  top: 13px;
  left: 8px;
  border-radius: 50px;
  background: rgb(0, 102, 239);
}
.f-submit {
  margin-top: -1.5rem;
}
.eachOther-from /deep/ .el-upload--picture-card {
  width: 60px;
  height: 60px;
  line-height: 60px;
}
.eachOther-from /deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 60px;
  height: 60px;
}
.eachOther-from /deep/ .el-input__count {
  float: right;
  margin-top: -28px;
  margin-right: 11px;
}
.flex_box {
  display: flex;
  justify-content: flex-end;
  justify-content: space-evenly;
  .flex_one {
    width: 75%;
    // border: 1px solid red;
    display: inline-block;
  }
  .flex_tow {
    width: 22%;
    // border: 1px solid red;
    display: inline-block;
    .flex_t_title {
      font-size: 19px;
      padding-left: 5px;
      font-weight: bolder;
    }
    #mainIframe {
      height: 105vh;
      width: 100%;
      // pointer-events: unset;
      pointer-events: none;
    }
    .iframe_box {
      margin-top: 0.3125rem;
      overflow-y: scroll;
      height: 70vh;
      width: 100%;
      background: #fff;
    }
    .iframe_box::-webkit-scrollbar {
      width: 4px;
    }
    .iframe_box::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      opacity: 0.2;
      background: rgba(3, 35, 88, 0.2);
    }
    .iframe_box::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(3, 35, 88, 0.2);
    }
  }
}
.each_interactiveViewTow /deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-47%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 120px);
  max-width: calc(100% - 30px);
}
.each_interactiveViewTow /deep/ .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.each_imgDialog /deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-47%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 120px);
  max-width: calc(100% - 30px);
}
.each_imgDialog /deep/ .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.f-item {
  display: flex;
  flex-wrap: wrap;
}
.f-item div {
  width: 33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgb(12, 114, 232);
  margin-top: 10px;
  border-radius: 10px;
}
.elCol-one {
  border: 1px solid rgb(12, 114, 232);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.elCol-tow {
  margin-left: 0px;
  border: 1px solid rgb(12, 114, 232);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  // border-top: 1px solid rgb(12,114,232);
  // border-right: 1px solid rgb(12,114,232);
  // border-bottom: 1px solid rgb(12,114,232);
}
.input-div .el-form-item {
  margin-bottom: 1px;
}

// .dan_radio .el-radio:nth-of-type(1) {
//   margin-left: 10px;
// }
.el-radio + .el-radio {
  margin-left: 0px;
}
// .duo_radio .el-checkbox:nth-of-type(1) {
//   margin-left: 10px;
// }
.el-checkbox + .el-checkbox {
  margin-left: 0px;
}
.dan_radio .el-radio,
.el-checkbox {
  padding: 4px 0px;
}
.duo_radio .el-checkbox,
.el-checkbox {
  padding: 0px 0px;
}
.input-div /deep/ .el-form-item__content {
  // margin-left: 52px !important;
  margin-left: 1rem !important;
}
.input-name {
  width: 10%;
  text-align: right;
}
.input_lenth {
  // width: 35%;
  width: 60%;
  // width: 600px;
  display: inline-block;
  //   style="margin-left: 20px; display: inline-block"
}
.form-b-content {
  display: inline-block;
  height: 40px;
  margin-left: 20px;
  text-align: right;
}
.form-b {
  height: 40px;
  // display: inline-block;
}
.form-i {
  display: flex;
  justify-content: flex-start;
  border: 1px solid rgb(12, 114, 232);
}
.form-i:hover .form-b {
  //   display: inline-block;
  //   height: 80px;
  //  margin-top: -30px;
}
.chooseFile #uploadbtn {
  width: 11.25rem;
  height: 1.875rem;
  margin-left: -30px;
  background: transparent;
  color: #c4cacc;
  // border: 1px solid;
  outline: none;
  box-shadow: -1px 0px 7px 5px #2c5190 inset;
  border: 0;
  padding-left: 0.625rem;
  text-align: left;
}
.s-select {
  width: 11.25rem;
  height: 30px;
  // background: rgb(13,45,105);
  color: #fff;
  background: transparent;
  color: #c4cacc;
  outline: none;
  box-shadow: -1px 0px 7px 5px #2c5190 inset;
  border: 0;
  padding-left: 0.625rem;
}
#dateTime {
  width: 11.25rem;
  color: #fff;
  background: transparent;
  color: #c4cacc;
  outline: none;
  box-shadow: -1px 0px 7px 5px #2c5190 inset;
  border: 0;
  padding-left: 0.625rem;
}
.f-edit {
  margin-top: 5%;
}
.each_interactiveViewTow /deep/ .el-input__inner {
  color: #fff !important;
}
.fujian_time {
  margin-left: 1.875rem;
}
</style>
<style lang="scss">
.each_interactiveViewTow .el-dialog__body::-webkit-scrollbar {
  width: 10px;
}
.each_interactiveViewTow .el-dialog__body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(62, 142, 247, 0.2);
  opacity: 0.2;
  background: rgba(62, 142, 247, 0.2);
}
.each_interactiveViewTow .el-dialog__body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(62, 142, 247, 0.2);
  border-radius: 0;
  background: rgba(62, 142, 247, 0.2);
}
.elCol-tow::-webkit-scrollbar {
  width: 10px;
}
.elCol-tow::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(62, 142, 247, 0.2);
  opacity: 0.2;
  background: rgba(62, 142, 247, 0.2);
}
.elCol-tow::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(62, 142, 247, 0.2);
  border-radius: 0;
  background: rgba(62, 142, 247, 0.2);
}
</style>